<template>
  <!-- 添加目录对话框 -->
  <div class="container">
    <el-dialog
      :title="id ? '修改目录' : '新增目录'"
      :visible="dialogFormVisible"
      @close="closeDialog"
    >
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择所属学科" width="100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.subjectName"
              :value="item.subjectID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="directoryName" label="目录名称">
          <el-input
            v-model="form.directoryName"
            placeholder="请输入目录名称"
            style="width: 100%"
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <!-- 按钮 -->
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button size="medium" @click="closeDialog"> 取消 </el-button>
              <el-button size="medium" type="primary" @click="submit">
                确定
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, add, update } from '@/api/hmmm/directorys.js'
export default {
  name: 'DireCtorysAdd',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      form: {
        directoryName: '',
        subjectID: '',
        id: ''
      },
      options: [],
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '目录名称的长度为2-10个字符',
            trigger: 'blur'
          }
        ] // 目录名称
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeDialog () {
      this.form = {
        directoryName: '',
        subjectID: '',
        id: ''
      }

      // 重置表单
      this.$refs.form.resetFields()

      this.$emit('update:dialogFormVisible', false)
    },
    async getSimple () {
      const { data } = await list()
      // console.log(data.items)

      this.options = data.items
      // this.form.subjectName = data.items.subjectName
    },
    // 点击确定按钮发起增加学科的请求
    async submit () {
      try {
        // form表单校验
        await this.$refs.form.validate()

        // 判断为添加还是编辑
        if (this.form.id) {
          console.log(this.form.id)
          await update(this.form)
          this.$message.success('编辑成功')
        } else {
          // 发起请求
          this.form.pid = this.pid
          await add(this.form)
          this.$message.success('添加成功')
        }

        // 关闭页面弹窗
        this.closeDialog()

        // $emit方式调用父组件上的方法

        // 调用父组件上的方法
        this.$parent.initTable()
      } catch (error) {
        console.log(error)
      }
    },
    // 在编辑状态下发起获取学科详情的请求
    async getDepartmentInfo () {
      const { data } = await detail(this.id)

      this.form = { ...data }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  ::v-deep .el-dialog {
    width: 400px;
    ::v-deep .el-dialog__header {
      padding: 20px 20px 10px;
    }
    .el-dialog__body {
      .el-form {
        .el-form-item--medium {
          margin-bottom: 18px;
          width: 100%;
          .el-input {
            width: 100%;
            line-height: 32px;
            font-size: 14px;
            ::v-deep .el-input__inner {
              width: 100%;
              height: 32px;
              line-height: 32px;
            }
          }
        }
        .el-form-item {
          .el-form-item__content {
            .quill-editor {
              ::v-deep .ql-container {
                height: 200px;
              }
            }
            .el-select {
              width: 100%;
            }
            .el-row {
              width: 100%;
              display: flex;
              .el-col {
                width: 100%;
                display: flex;
                justify-content: flex-end;
              }
            }
          }
        }
      }
    }
  }
}
</style>
